{{addToMap . "ContentTitle" .Project.Title}}
{{addToMap . "ContentTitleSmall" .Project.Desc}}
<script type="text/javascript" src="/static/resource/plugins/jQuery/jquery.autocomplete.min.js"></script>
<style type="text/css">
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
</style>
<div class="content">
    <div class="row">
        <div class="col-md-6 col-sm-12">
          <div class="info-box">
            <span class="info-box-icon bg-aqua"><i class="fa fa-key"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">APIKey</span>
              <span class="info-box-number">{{.Project.Apikey}}</span>
            </div><!-- /.info-box-content -->
          </div>
        </div>
        <div class="col-md-6 col-sm-12">
          <div class="info-box">
            <span class="info-box-icon bg-red"><i class="fa fa-lock"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">SecureKey</span>
              <span class="info-box-number">{{.Project.Securekey}}</span>
            </div><!-- /.info-box-content -->
          </div>
        </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <!-- small box -->
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3>{{.TracingNum}}</h3>
            <p>监控点</p>
          </div>
          <div class="icon">
            <i class="fa fa-list-alt"></i>
          </div>
          <a href="/project/{{.Project.Id}}/tracing?listsubmenu={{.SubMenu}}" class="small-box-footer">监控点列表 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <!-- small box -->
        <div class="small-box bg-red">
          <div class="inner">
            <h3>{{.WarningNum}}</h3>
            <p>24小时内报警</p>
          </div>
          <div class="icon">
            <i class="fa fa-warning"></i>
          </div>
          <a href="/project/{{.Project.Id}}/warnings?listsubmenu={{.SubMenu}}" class="small-box-footer">报警列表 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">最近报警</h3>
            </div><!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
            {{$warningIdsNum := len .WarningIds}}
            {{if ne $warningIdsNum 0}}
              <table class="table table-hover">
              <thead>
                  <tr>
                  <th>报警时间</th>
                  <th>项目</th>
                  <th>监控点</th>
                  <th>连续报警次数</th>
                  <th>上报内容</th>
                  <th>项目负责人</th>
                  </tr>
              </thead>
                <tbody>
                {{range .WarningIds}}
                {{$warning := index $.Warnings .}}
                {{$tracing := index $.Tracings $warning.TracingId}}
                <tr>
                    <td>
                    {{dateformat $warning.CreateTime "2006-01-02 15:04:05"}}
                    </td>
                    <td>
                    {{$.Project.Title}}
                    </td>
                    <td>
                    <a href="/project/{{$.Project.Id}}/tracing/{{$tracing.Id}}/update">{{$tracing.Key}}</a>
                    </td>
                    <td>
                    {{$warning.Num}}
                    </td>
                    <td>
                    {{substr $warning.Data 0 100}}{{$datalen := len $warning.Data}}{{if gt $datalen 100}}...{{end}}
                    </td>
                    <td>
                    <a tabindex="0" class="user-popover" data-toggle="popover" data-trigger="focus" role="button" data-placement="bottom" data-content="<b>用户名:</b><br />{{$.ProjectUser.Username}}<br /><b>联系电话:</b><br/>{{$.ProjectUser.Phone}}<br /><b>邮箱:</b><br /> {{$.ProjectUser.Email}}">{{$.ProjectUser.Name}}</a>
                    </td>
                </tr>
                {{end}}
              </tbody></table>
              {{else}}
               <p class="text-center lead">当前没有报警</p>
              {{end}}
            </div><!-- /.box-body -->
          </div><!-- /.box -->
        </div>
      </div>

      <!--
      关注项目用户 
      -->
      <div class="row">
          <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                  <h3 class="box-title">项目关注人({{len .FollowUsers}})</h3>
                </div><!-- /.box-header -->
                <div class="box-body table-responsive no-padding" id="alarmuser-list">
                {{if .FollowUsers}}
                    {{range $k, $u := .FollowUsers}}
                    <div class="label label-primary" style="display:inline-block;line-height:1.5;margin:5px">
                        {{if eq $.Project.UserId $.Uid}}
                        <i class="fa fa-fw fa-close alarmuser-close-button" user-id="{{$u.Id}}" style="cursor:pointer"></i>
                        {{end}}
                        {{$u.Name}}({{$u.Username}})
                    </div>
                    {{end}}
                {{else}}
                    <p class="text-center lead">当前没有关注用户</p>
                {{end}}
                </div>
                
                <div class="box-footer">
                    {{if eq .Project.UserId .Uid}}
                    <label for="input-alarmuser">新增关注用户</label>
                    <div class="input-group input-group-sm col-sm-3">
                    <input type="text" id="alarmuser-input" class="form-control">
                    <span class="input-group-btn">
                      <button class="btn btn-info btn-flat" id="add-new-followuser-btn" type="button">确认</button>
                    </span>
                    </div>
                    {{end}}
                </div>
            </div>
          </div>
      </div>
</div>
<script type="text/javascript">
$(function(){
$(".alarmuser-close-button").on("click", function(e){
    if (!confirm("确认需要删除该用户么？")) {
      return;
    }
    var uid = $(this).attr("user-id");
    var me = $(this);
    $.post("/project/{{.Project.Id}}/ajaxRemoveUser", {"uid":uid}, function(repo){
      if (repo.code != 0) {
        alert("删除错误!\n" + repo.msg);
        return;
      } else {
        me.parent().remove();
        alert("删除成功!");
      }
    }, "json");
});

$('#alarmuser-input').autocomplete({
  serviceUrl: '/user/ajaxGetUsersByNameUserName',
  paramName: 'k',
  onSelect: function (suggestion) {
      $('#alarmuser-input').attr('user-id', suggestion.data)
  },
  transformResult: function(response) {
    response = JSON.parse(response);
    if (response.code != 0) {
      return {suggestions:[]}
    }


    return {
        suggestions: $.map(response.data, function(dataItem) {
            return { value: dataItem.Name + "(" + dataItem.Username + ")", data: dataItem.Id };
        })
    };
  }
});

$('#add-new-followuser-btn').on("click", function(){
  var valueName = $('#alarmuser-input').val();
  var uid = $('#alarmuser-input').attr("user-id");
  if (!valueName || !uid) {
    alert("请选择要添加的用户!");
    return;
  }

  valueName = valueName.split('(');
  if (valueName && valueName.length != 2) {
    alert("参数错误!");
    return;
  }
  username = valueName[1].slice(0, -1);
  name = valueName[0];
  if (!username || !name) {
    alert("参数错误!");
    return;
  }

  //发起请求
  $.post("/project/{{.Project.Id}}/ajaxAddUser", {"uid":uid, "username":username, "name":name}, function(repo){
    if (repo.code != 0) {
      alert("增加用户错误");
      return
    } else {
      addUserNode(valueName, uid);
      alert("增加成功");
    }
  }, "json");

});

$('.user-popover').popover({html:true});


});

function addUserNode(valueName, uid) {
  var html = '<div class="label label-primary" style="display:inline-block;line-height:1.5;margin:5px"><i class="fa fa-fw fa-close alarmuser-close-button" user-id="'+uid+'" style="cursor:pointer"></i>'+valueName+'</div>';

  $(html).appendTo('#alarmuser-list');
}
</script>